<template>
	<view class="content">
		<!-- <pyh-nv :config="config"></pyh-nv> -->
		<!-- <image :src="baseurl+'project/bg.png'" class="bg"></image> -->
		<view class="menuBox" v-if="isMenu">
			<view class="menuLeft" @click="toTop()">
				<text class="menuLeftLabel">楼盘详情</text>
				<image :src="baseurl+'project/backtop.png'" class="menuLeftIcon"></image>
			</view>
			<view class="menuRight">
				<v-tabs v-model="current" :scroll="true" :tabs="tabs" fontSize="25rpx" @change="changeTab"
					color="#000000" activeColor="#6D9CB3" height="50rpx" lineHeight="5rpx" lineColor="#6D9CB3"
					lineScale="0.6" bgColor="transparent" paddingItem="24rpx">
				</v-tabs>
			</view>
		</view>
		<scroll-view class="projectInfoBox" :class="isMenu?'padding':''" scroll-y="true" @scroll="scroll"
			:scroll-into-view="clickId">
			<view class="videoBox" v-if="content.video">
				<video :src="content.video" :controls="true" autoplay="true" class="video"></video>
			</view>
			<swiper class="swiperBox" circular='true' autoplay="true" :interval="3000" :duration="1000" id="clickId0" v-else>
				<swiper-item class="swiper-item" v-for="(item,index) in content.projectImg" :key="index">
					<image :src="item" class="swiperImg"></image>
				</swiper-item>
			</swiper>
			<view class="nameBox">
				<text class="name">{{content.name}}</text>
				<view class="tagBox" v-if="content.tag">
					<view class="tagItem" :class="index==0?'tagItemFirst':''"
						v-for="(item,index) in $strtoarr(content.tag,'/')" :key="index">
						{{item}}
					</view>
				</view>
				<view class="stateBox" v-if="content.sell_status==1">
					<image src="https://miantou.guguan.net/img/project/state2.png" class="stateImg"></image>
				</view>
				<view class="stateBox" v-else>
					<image src="https://miantou.guguan.net/img/project/state1.png" class="stateImg"></image>
				</view>
			</view>
			<view class="navigationBox"
				@click="$openLocation(content.latitude,content.longitude,content.name,content.address)">
				<text class="addressText">{{content.address}}</text>
				<view class="navigationIconBox">
					<image :src="baseurl+'project/navigation.png'" class="navigationIcon"></image>
					<text class="navigationLabel">导航</text>
				</view>
			</view>
			<view class="basicInfoBox">
				<view class="basicInfoItem">
					<view class="basicInfoLeft1">
						<text class="basicLabel">参考均价：</text>
						<text class="basicInfo">{{content.average_price}}</text>
					</view>
				</view>
				<view class="basicInfoItem">
					<view class="basicInfoLeft">
						<text class="basicLabel">参考总价：</text>
						<text class="basicInfo">{{content.total_price}}</text>
					</view>
					<view class="basicInfoRight">
						<text class="basicLabel">建筑面积：</text>
						<text class="basicInfo">{{content.area_acreage}}</text>
					</view>
				</view>
				<view class="basicInfoItem">
					<view class="basicInfoLeft">
						<text class="basicLabel">产品类型：</text>
						<text class="basicInfo">{{content.project_type}}</text>
					</view>
					<view class="basicInfoRight">
						<text class="basicLabel">容积率：</text>
						<text class="basicInfo" decode="true">&ensp;&ensp;{{content.radio}}</text>
					</view>
				</view>
				<view class="basicInfoItem">
					<view class="basicInfoLeft">
						<text class="basicLabel">首次开盘：</text>
						<text class="basicInfo">{{content.first_open}}</text>
					</view>
					<view class="basicInfoRight">
						<text class="basicLabel">车位数量：</text>
						<text class="basicInfo">{{content.carport}}</text>
					</view>
				</view>
				<view class="basicInfoItem">
					<view class="basicInfoLeft">
						<text class="basicLabel">绿化率：</text>
						<text class="basicInfo" decode="true">&ensp;&ensp;{{content.afforest}}</text>
					</view>
					<view class="basicInfoRight">
						<text class="basicLabel">规划住户：</text>
						<text class="basicInfo">{{content.households}}</text>
					</view>
				</view>
				<view class="basicInfoItem">
					<text class="basicLabel">物业类型：</text>
					<text class="basicInfo">{{content.tenement_type}}</text>
				</view>
				<view class="basicInfoItem">
					<text class="basicLabel">预售证：</text>
					<text class="basicInfo">{{content.certificate}}</text>
				</view>
				<view class="basicInfoItem">
					<text class="basicLabel">物业公司：</text>
					<text class="basicInfo">{{content.company}}</text>
				</view>
				<view class="basicInfoItem">
					<text class="basicLabel">物业费用：</text>
					<text class="basicInfo">{{content.property_fee}}</text>
				</view>
				<!-- <view class="expandBox">
					<text class="expandLabel">展开全部信息</text>
					<image :src="baseurl+'project/arrowDown.png'" class="arrow"></image>
				</view>
				<view class="retractBox">
					<text class="retractLabel">收起</text>
					<image :src="baseurl+'project/arrowUp.png'" class="arrow"></image>
				</view> -->
			</view>
			<!-- 项目总平 -->
			<view class="itemBox ScrollItem" id="clickId1">
				<view class="itemHeadBox">
					<text class="itemTitle">项目总平</text>
				</view>
				<view class="itemBoxInner">
					<image :src="content.acreage_img" class="zongping" @click="big(content.acreage_img)"></image>
				</view>
			</view>
			<!-- 户型展示 -->
			<view class="itemBox ScrollItem" id="clickId2">
				<view class="itemHeadBox">
					<text class="itemTitle" :class="isHuxing?'':'disable'" @click="changeType()">户型展示</text>
					<text class="itemTitle" :class="!isHuxing?'':'disable'" @click="changeType()">项目图册</text>
				</view>
				<view class="itemBoxInner" v-if="isHuxing">
					<swiper class="swiperBoxHx" circular='true' autoplay="true" :interval="3000" :duration="1000">
						<swiper-item class="swiper-item" v-for="(item,index) in huxingPic" :key="index">
							<image :src="item.url" class="swiperImg" @click="big(item.url)"></image>
						</swiper-item>
					</swiper>
				</view>
				<view class="itemBoxInner" v-else>
					<swiper class="swiperBoxHx" circular='true' autoplay="true" :interval="3000" :duration="1000">
						<swiper-item class="swiper-itemxm" v-for="(item,index) in content.projet_img" :key="index">
							<image :src="item" class="swiperImgxm" @click="big(item)"></image>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<!-- 周边配套 -->
			<view class="itemBox ScrollItem" id="clickId3">
				<view class="itemHeadBox">
					<text class="itemTitle">周边配套</text>
				</view>
				<view class="itemBoxInner">
					<!-- <map :latitude="31.411219" :longitude="104.789869" class="map"></map> -->

					<!-- <image :src="content.area_img" class="map" @click="big(content.area_img)"></image> -->
					<map class="map" :latitude="latitude" :longitude="longitude" :markers="markers"></map>
					<view class="mapMenuBox">
						<view class="mapMenuItem"
							@click="$navto.navto('/packageB/project_around/project_around',{id:content.id,type:0,latitude:latitude,longitude:longitude})">
							<image :src="baseurl+'project/traffic.png'" class="mapMenuIcon"></image>
							<text class="mapMenuLabel">交通</text>
						</view>
						<view class="mapMenuItem"
							@click="$navto.navto('/packageB/project_around/project_around',{id:content.id,type:1,latitude:latitude,longitude:longitude})">
							<image :src="baseurl+'project/business.png'" class="mapMenuIcon"></image>
							<text class="mapMenuLabel">商业</text>
						</view>
						<view class="mapMenuItem"
							@click="$navto.navto('/packageB/project_around/project_around',{id:content.id,type:2,latitude:latitude,longitude:longitude})">
							<image :src="baseurl+'project/medical.png'" class="mapMenuIcon"></image>
							<text class="mapMenuLabel">医疗</text>
						</view>
						<view class="mapMenuItem"
							@click="$navto.navto('/packageB/project_around/project_around',{id:content.id,type:3,latitude:latitude,longitude:longitude})">
							<image :src="baseurl+'project/education.png'" class="mapMenuIcon"></image>
							<text class="mapMenuLabel">教育</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 项目价值 -->
			<view class="itemBox ScrollItem" id="clickId4">
				<view class="itemHeadBox">
					<text class="itemTitle">项目价值</text>
				</view>
				<view class="itemBoxInner">
					<image :src="content.buildings_img" mode="widthFix" style="width: 100%;"
						@click="big(content.buildings_img)"></image>
				</view>
			</view>
			<!-- 楼盘动态 -->
			<view class="itemBox ScrollItem" id="clickId5">
				<view class="itemHeadBox">
					<text class="itemTitle">楼盘动态</text>
					<text class="more"
						@click="login===false?$navto.navto('/packageB/login/login'):$navto.navto('packageB/project_news/project_news',{id:content.id})">查看更多></text>
				</view>
				<view class="itemBoxInner">
					<view class="newsBox">
						<view class="newsItem" v-for="(item,index) in news.slice(0,2)" :key="index"
							@click="toInfo(item.id,item.uri)">
							<text class="newsTitle">{{item.title}}</text>
							<text class="newsInfo">{{item.intro}}</text>
							<view class="newsBottom">
								<!-- <view class="typePreferential" v-if="item.tag=='优惠'">
									优惠
								</view>
								<view class="typeActivity" v-else>
									活动
								</view> -->
								<text class="newsTime">{{item.create_time}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 精选留言 -->
			<view class="itemBox ScrollItem" id="clickId6" v-if="isTab==1">
				<view class="itemHeadBox">
					<text class="itemTitle">精选留言</text>
					<text class="more"
						@click="login===false?$navto.navto('/packageB/login/login'):$navto.navto('packageB/project_comment/project_comment',{id:content.id})">查看更多></text>
				</view>
				<view class="itemBoxInner">
					<view class="publishBox">
						<image :src="baseurl+'project/test.png'" class="avatar"></image>
						<input type="text" placeholder="发表你想说的言论" class="fabiao" v-model="message" />
						<view class="fasong" @click="submit">
							发送
						</view>
					</view>
					<view class="publishList">
						<view class="publishItem" v-for="(item,index) in msg.slice(0,2)" :key="index">
							<view class="publishHead">
								<image :src="item.avatar" class="avatar"></image>
								<view class="publishNameBox">
									<text class="name">{{item.nickname}}</text>
									<text class="time">{{item.create_time}}</text>
								</view>
								<view class="publishVoteBox">
									<text class="voteNum">{{item.endorse_num}}</text>
									<image :src="baseurl+'project/vote.png'" class="voteIcon" v-if="item.like==0"
										@click="vote(item.id)"></image>
									<image :src="baseurl+'project/voted.png'" class="voteIcon" v-else></image>
								</view>
							</view>
							<text class="publishInfo">{{item.content}}</text>
							<!-- <text class="showAll" v-if="item.msg_arr.length>0">查看全部{{item.msg_arr.length}}条回复</text> -->
						</view>
					</view>
				</view>
			</view>
			<!-- 官方顾问 -->
			<view class="itemBox ScrollItem" id="clickId7" style="margin-bottom: 200rpx;">
				<view class="itemHeadBox">
					<text class="itemTitle">官方顾问</text>
				</view>
				<view class="itemBoxInner">
					<view class="guwenBox">
						<view class="guwenItem" v-for="(item,index) in guwenList" :key="index">
							<image :src="item.head" class="guwenAvatar"></image>
							<!-- <view class="guwenTag">金牌顾问</view> -->
							<text class="guwenName">{{item.name}}</text>
							<image :src="baseurl+'project/guwen.png'" class="guwenTag"></image>
							<view class="contactBox">
								<view class="msgBox">
									<image :src="baseurl+'project/message.png'" class="icon"></image>
									<button open-type="contact" class="zixunBtn"></button>
								</view>
								<view class="telBox" @click="makePhoneCall(index)">
									<image :src="baseurl+'project/tel.png'" class="icon"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="menuBottomBox">
			<view class="shareBox">
				<image :src="baseurl+'project/share.png'" class="shareIcon"></image>
				<text class="shareLabel">转发</text>
				<button open-type="share" class="shareBtn"></button>
			</view>
			<view class="tuijianBox"
				@click="toWebview(content.url)">
				我要推荐
			</view>
			<view class="orderBox"
				@click="login===false?$navto.navto('/packageB/login/login'):$navto.navto('packageB/order/order',{id:content.id})">
				预约看房
			</view>
		</view>
	</view>
</template>

<script>
	import QQMapWX from "@/common/qqmap-wx-jssdk.min.js" //引入sdk
	export default {
		data() {
			return {
				baseurl: this.$baseurl,
				// config: {
				// 	title: '项目详情',
				// 	bgColor: '#ffffff',
				// 	color: '#000000',
				// },
				content: '',
				isHuxing: true,
				huxingPic: [],
				current: 0,
				tabs: ['项目总平', '户型展示', '周边配套', '项目价值', '楼盘动态', '精选留言', '官方顾问'],
				guwenList: [],
				id: '',
				msg: [],
				login: '',
				isMenu: true,
				clickId: '',
				clickIdArr: ['clickId1', 'clickId2', 'clickId3', 'clickId4', 'clickId5', 'clickId6', 'clickId7'],
				message: '',
				markers: [],
				latitude: '',
				longitude: '',
				news: [],
				isClick: false,
				distanceList:[],
				isTab:''
			}
		},
		onShow(options) {
			let pagearr = getCurrentPages();
			let currentPage = pagearr[pagearr.length - 1];
			console.log(currentPage.options);
			this.id = currentPage.options.id;
			this.login = this.isLogin;
			console.log(this.login);
			this.$request.get(`Community/submit_status`).then(res => {
				this.isTab = res.data.data;
			})
			this.$request.get(`project/project_detail?project_id=${this.id}`).then(res => {
				console.log(res);
				this.content = res.data.data;
				this.latitude = '' + this.content.latitude;
				this.longitude = '' + this.content.longitude;
				let obj = {};
				obj.id = 1;
				obj.width = '35rpx';
				obj.height = '45rpx';
				let calloutobj = {};
				calloutobj.content = this.content.name;
				calloutobj.display = 'ALWAYS';
				calloutobj.color = '#ffffff';
				calloutobj.fontSize = '12px';
				calloutobj.borderRadius = '5px';
				calloutobj.bgColor = "#4173FA";
				calloutobj.textAlign = "center";
				calloutobj.borderWidth = "5px";
				calloutobj.padding = "10px";
				obj.callout = calloutobj;
				obj.latitude = this.latitude;
				obj.longitude = this.longitude;
				obj.iconPath = "https://miantou.guguan.net/img/project/addressIcon.png";
				this.markers.push(obj);
			})
			// 项目顾问
			this.$request.get(`ProjectBroker/lists?project_id=${this.id}`).then(res => {
				console.log(res.data.data);
				this.guwenList = res.data.data;
			})
			// 项目户型图
			this.$request.get(`ProjectIchnography/lists?project_id=${this.id}`).then(res => {
				console.log(res.data.data);
				this.huxingPic = res.data.data.list;
				console.log(this.huxing);
			})
			// 项目留言
			this.$request.get(`ProjectMsg/lists?project_id=${this.id}`).then(res => {
				console.log(res.data.data);
				this.msg = res.data.data;
			})
			// 项目新闻
			this.$request.get(`article/lists?project_id=${this.id}&page_no=1&page_size=10&cid=0`).then(res => {
				console.log(res.data.data);
				this.news = res.data.data.list;
			})
		},
		onLoad(options) {
			// var pages = getCurrentPages();
			// var page = pages[pages.length - 1];
			// const opt = decodeURIComponent(page.options);
			// console.log(opt);
			// let pagearr = getCurrentPages();
			// let currentPage = pagearr[pagearr.length - 1];
			// this.id = currentPage.options.id;
			
			// console.log(options);
			// this.id = options.id;
			// console.log(this.id);
			// this.id = 21;
			// 项目详情
			
		},
		// 分享微信好友
		onShareAppMessage() {
			console.log('分享了');
			console.log(this.id);
			this.addShare();
			return {
				title: this.content.name, //分享标题 这个可以根据业务需求去定义
				path: `/packageB/project_info/project_info?id=${this.id}`
			}
		},
		// 分享朋友圈
		onShareTimeline() {
			console.log('分享了');
			this.addShare();
			return {
				title: this.content.name, //分享标题 这个可以根据业务需求去定义
				path: `/packageB/project_info/project_info?id=${this.id}`
			}
		},
		mounted() {
			setTimeout(() => {
				this.getDistanceToTop();
			}, 500)
		},

		methods: {
			toWebview(url){
				this.$navto.navto('/packageB/webview/webview',{url:url})
			},
			addShare() {
				this.$request.get(`project/share_num?id=${this.id}`).then(res => {
					console.log(res);
				})
			},
			getDistanceToTop() { //获取右侧各部分距离顶部的距离
				let that = this
				let selectorQuery = uni.createSelectorQuery().in(this);
				selectorQuery.selectAll('.ScrollItem').boundingClientRect(function(rects) {
					rects.forEach(function(rect) {
						that.distanceList.push(rect.top)
					})
					console.log('that.distanceList', that.distanceList);
				}).exec()
			},
			//查看大图
			big(url) {
				let arr = [];
				arr.push(url)
				uni.previewImage({
					loop: true,
					urls: arr, //可以展示imgUrl 列表中所有的图片
				});
			},
			toInfo(id, url) {
				if (url) { //存在链接跳公众号
					this.$navto.navto('/pages/webview/webview', {
						url: url,
						from: 1
					})
				} else { //跳
					this.$navto.navto('/packageB/news_info/news_info', {
						id: id
					})
				}
			},
			vote(id) {
				this.$request.get(`projectMsg/user_endorse?msg_id=${id}`).then(res => {
					console.log(res);
					this.$toast({
						title: res.data.msg
					})
					this.$request.get(`ProjectMsg/lists?project_id=${this.id}`).then(res => {
						console.log(res.data.data);
						this.msg = res.data.data;
					})
				})
			},
			submit() {
				if (this.login === false) {
					this.$navto.navto('/packageB/login/login')
					return false
				}
				if (!this.message) {
					this.$toast({
						title: '请输入你想说的言论'
					})
					return false
				}
				this.$request.post(`ProjectMsg/user_msg`, {
					project_id: this.id,
					content: this.message,
				}).then(res => {
					console.log(res);
					if (res.data.code > 0) {
						this.$toast({
							title: '发送成功'
						})
					} else {
						this.$toast({
							title: '发送失败'
						})
					}
				})
			},
			scroll(e) {
				let distance;
				if (this.isClick) {
					distance = e.detail.scrollTop;
					console.log(distance)
					if (distance >= 740) {
						this.isMenu = true;
						this.current = 0;
					} else {
						this.isMenu = false;
					}
				}
				setTimeout(() => {
					this.isClick = true;
				}, 1000)
				for(let i=0;i<this.distanceList.length;i++){
					if(distance>this.distanceList[i]){
						this.current = i+1;
					}
				}
			},
			changeTab(index) {
				this.isClick = false;
				this.current = index;
				this.clickId = this.clickIdArr[index];
				console.log(this.current)
				console.log(this.clickId)
			},
			toTop() {
				this.clickId = 'clickId0';
				this.isMenu = false;
			},
			changeType() {
				this.isHuxing = !this.isHuxing;
			},
			makePhoneCall(index) {
				console.log(index)
				let phone = this.guwenList[index].phone
				phone = phone.toString()
				uni.makePhoneCall({
					phoneNumber: phone
				})
			}
		}
	}
</script>

<style lang="scss">
	.videoBox {
		position: relative;
		width: 100%;
		height: 385rpx;
		.video{
			width: 100%;
			height: 100%;
		}
	}
	.padding {
		padding-top: 80rpx;
	}

	.menuBottomBox {
		position: fixed;
		width: 100%;
		height: 182rpx;
		bottom: 0;
		background-color: #fff;
		border-radius: 10rpx 10rpx 0 0;
		padding-top: 30rpx;
		display: flex;
		z-index: 99;

		.shareBox {
			position: relative;
			width: 48rpx;
			height: 80rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-left: 48rpx;

			.shareBtn {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				opacity: 0;
			}

			.shareIcon {
				width: 48rpx;
				height: 48rpx;
			}

			.shareLabel {
				font-size: 20rpx;
			}
		}

		.orderBox,.tuijianBox {
			width: 290rpx;
			height: 80rpx;
			background: url('https://miantou.guguan.net/img/project/btnBg.png');
			background-size: 100% 100%;
			margin-left: 15rpx;
			font-size: 32rpx;
			line-height: 80rpx;
			text-align: center;
			color: #fff;
			border-radius: 15rpx;
		}
		.tuijianBox{
			margin-left: 35rpx;
		}
	}

	.newsBox {
		width: 100%;
		display: flex;
		flex-direction: column;

		.newsItem {
			width: 100%;
			padding-top: 24rpx;
			padding-bottom: 24rpx;
			box-shadow: 0rpx 8rpx 24rpx 0rpx rgba(51, 51, 51, 0.05);
			display: flex;
			flex-direction: column;

			.newsBottom {
				width: 100%;
				display: flex;
				align-items: center;
				padding-left: 24rpx;
				padding-right: 24rpx;
				margin-top: 60rpx;
				justify-content: space-between;

				.newsTime {
					color: #6E7480;
					font-size: 24rpx;
				}

				.typePreferential {
					color: #ffffff;
					font-size: 24rpx;
					padding: 8rpx;
					background-color: #F17D51;
					border-radius: 10rpx;
				}

				.typeActivity {
					color: #ffffff;
					font-size: 24rpx;
					padding: 8rpx;
					background-color: #887CF2;
					border-radius: 10rpx;
				}
			}

			.newsTitle {
				width: 600rpx;
				font-size: 28rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				margin-left: 20rpx;
			}

			.newsInfo {
				width: 600rpx;
				color: #6E7480;
				margin-top: 16rpx;
				margin-left: 20rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}

	.publishList {
		width: 100%;
		margin-top: 24rpx;
		position: relative;

		.publishItem {
			width: 100%;
			position: relative;

			.showAll {
				display: block;
				color: #9B9292;
				font-size: 22rpx;
				margin-top: 24rpx;
				float: right;
				margin-right: 24rpx;
			}

			.publishInfo {
				width: 550rpx;
				margin-left: 88rpx;
				margin-top: 24rpx;
				display: block;
			}

			.publishHead {
				width: 100%;
				display: flex;
				position: relative;

				.publishVoteBox {
					display: flex;
					height: 72rpx;
					position: absolute;
					right: 0;
					top: 0;
					align-items: center;

					.voteNum {
						font-size: 28rpx;
					}

					.voteIcon {
						width: 32rpx;
						height: 32rpx;
						margin-left: 10rpx;
					}
				}

				.publishNameBox {
					height: 72rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 16rpx;

					.name {
						font-size: 28rpx;
					}

					.time {
						font-size: 22rpx;
					}
				}

				.avatar {
					width: 72rpx;
					height: 72rpx;
					border-radius: 50%;
				}
			}
		}
	}

	.publishBox {
		width: 100%;
		height: 64rpx;
		margin-top: 16rpx;
		display: flex;
		position: relative;

		.fasong {
			width: 100rpx;
			height: 64rpx;
			background: #428A9A;
			border-radius: 82rpx 82rpx 82rpx 82rpx;
			font-size: 24rpx;
			line-height: 64rpx;
			color: #fff;
			position: absolute;
			right: 0;
			text-align: center;
		}

		.fabiao {
			width: 424rpx;
			height: 64rpx;
			background: #D0E0E7;
			border-radius: 82rpx 82rpx 82rpx 82rpx;
			font-size: 24rpx;
			padding-left: 32rpx;
			padding-right: 100rpx;
			margin-left: 10rpx;
		}

		.avatar {
			width: 64rpx;
			height: 64rpx;
			border-radius: 50%;
		}
	}

	.guwenBox {
		position: relative;
		width: 100%;
		height: 600rpx;
		// margin-left: 20rpx;
		overflow-x: scroll;
		display: flex;
		flex-direction: column;
		.guwenItem {
			position: relative;
			width: 630rpx;
			height: 175rpx;
			background: #428A9A;
			display: flex;
			align-items: center;
			border-radius: 4rpx;
			margin-bottom: 30rpx;
			.guwenAvatar {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				border: 1rpx solid #E6F7FC;
				margin-left: 30rpx;
			}
			.contactBox {
				display: flex;
				// width: 100%;
				// justify-content: space-around;
				// margin-top: 20rpx;

				.zixunBtn {
					position: absolute;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
					opacity: 0;
				}

				.msgBox,
				.telBox {
					position: relative;
					display: flex;
					height: 24rpx;
					align-items: center;
					.icon {
						width: 80rpx;
						height: 80rpx;
					}
					.label {
						font-size: 22rpx;
					}
				}
				.msgBox{
					margin-left: 50rpx;
				}
				.telBox{
					margin-left: 15rpx;
				}
			}

				
			.guwenTag {
				width: 86rpx;
				height: 34rpx;
				margin-left: 17rpx;
			}

			.guwenName {
				width: 100rpx;
				font-size: 30rpx;
				color: #fff;
				margin-left: 40rpx;
			}
		}
	}

	.mapMenuBox {
		margin-top: 24rpx;
		width: 600rpx;
		height: 135rpx;
		display: flex;
		margin-left: 20rpx;
		justify-content: space-between;

		.mapMenuItem {
			width: 90rpx;
			height: 135rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.mapMenuIcon {
				width: 90rpx;
				height: 90rpx;
			}

			.mapMenuLabel {
				width: 100%;
				font-size: 28rpx;
				text-align: center;
			}
		}
	}

	.map {
		width: 100%;
		height: 424rpx;
		border-radius: 10rpx;
	}

	.disable {
		opacity: 0.4;
	}

	.zongping {
		width: 100%;
		height: 540rpx;
	}

	.itemBox {
		width: 100%;
		background: #fff;
		margin-top: 50rpx;
		border-radius: 10rpx;
		padding-bottom: 24rpx;
		overflow-x: hidden;

		.itemBoxInner {
			width: 638rpx;
			margin-left: 24rpx;
			margin-top: 16rpx;
		}

		.itemHeadBox {
			position: relative;
			width: 100%;
			height: 76rpx;
			background: url('https://miantou.guguan.net/img/project/titleBg.png');
			background-size: 100% 110%;

			.more {
				position: absolute;
				font-size: 24rpx;
				color: #397E91;
				right: 24rpx;
				line-height: 76rpx;
			}

			.itemTitle {
				height: 76rpx;
				line-height: 76rpx;
				margin-left: 24rpx;
				font-size: 32rpx;
				color: #397E91;
			}
		}
	}

	.expandBox,
	.retractBox {
		width: 100%;
		align-items: center;
		justify-content: center;
		display: flex;
		color: #999999;
		height: 40rpx;

		.arrow {
			width: 32rpx;
			height: 32rpx
		}
	}

	.basicInfoBox {
		position: relative;
		// width: 630rpx;
		border-radius: 10rpx;
		background-color: #fff;
		padding: 30rpx;
		margin-top: 30rpx;

		.basicInfoLeft1 {
			width: 100%;
		}

		.basicInfoLeft {
			width: 350rpx;
		}

		.basicInfoRight {}

		.basicInfoItem {
			margin-bottom: 20rpx;
			display: flex;
		}

		.basicInfo {
			width: 500rpx;
			font-size: 26rpx;
			font-weight: 600;
		}

		.basicLabel {
			width: 140rpx;
			font-size: 26rpx;
			color: #999999;
			font-weight: 500;
		}
	}

	.navigationBox {
		position: relative;
		width: 100%;
		height: 120rpx;
		border-radius: 10rpx;
		background-color: #fff;
		display: flex;
		margin-top: 30rpx;
		align-items: center;

		.navigationIconBox {
			width: 48rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.navigationIcon {
				width: 32rpx;
				height: 32rpx;
			}

			.navigationLabel {
				font-size: 24rpx;
			}
		}

		.addressText {
			width: 570rpx;
			margin-left: 24rpx;
		}
	}

	.nameBox {
		position: relative;
		width: 100%;
		height: 128rpx;
		margin-top: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.tagItem {
			font-size: 24rpx;
			border: 1rpx solid #fff;
			color: #fff;
			padding: 5rpx 10rpx;
			border-radius: 5rpx;
			margin-right: 10rpx;
		}

		.tagItemFirst {
			background: linear-gradient(180deg, #8AB3FF 0%, #407BFF 100%);
			border: none;
		}

		.stateBox {
			position: absolute;
			top: 0;
			right: 0;
			width: 89rpx;
			height: 128rpx;
			// background: url('https://miantou.guguan.net/img/project/state.png');
			// background-size: 100% 110%;
			text-align: center;
			// line-height: 110rpx;
			color: #fff;
			font-size: 34rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.stateImg{
				width: 100%;
				height: 100%;
			}
		}

		.tagBox {
			width: 580rpx;
			overflow-x: scroll;
			display: flex;
		}

		.name {
			font-size: 40rpx;
			color: #fff;
		}
	}

	.menuBox {
		position: fixed;
		width: 750rpx;
		height: 80rpx;
		// left: 32rpx;
		background: #fff;
		// top: 40rpx;
		z-index: 99;
		overflow-x: scroll;
		display: flex;
		align-items: center;

		.menuRight {
			width: 550rpx;
		}

		.menuLeft {
			display: flex;
			align-items: center;
			width: 150rpx;
			margin-left: 32rpx;

			.menuLeftLabel {
				font-size: 28rpx;
				color: #333333;
			}

			.menuLeftIcon {
				width: 20rpx;
				height: 20rpx;
				margin-left: 5rpx;
			}
		}
	}

	.swiperBoxHx {
		width: 100%;
		height: 902rpx;

		.swiper-itemxm {
			width: 100%;
			height: 100%;
			border-radius: 15rpx;
			display: flex;
			align-items: center;
		}

		.swiperImgxm {
			width: 100%;
		}

		.swiper-item,
		.swiperImg {
			width: 100%;
			height: 100%;
			border-radius: 15rpx;
		}
	}

	.swiperBox {
		width: 100%;
		height: 338rpx;

		.swiper-item,
		.swiperImg {
			width: 100%;
			height: 100%;
			border-radius: 15rpx;
		}
	}

	.projectInfoBox {
		position: relative;
		width: 686rpx;
		margin-left: 32rpx;
		margin-top: 30rpx;
		height: 77vh;
	}

	.content {
		width: 100%;
		height: 100vh;
		background: url("https://miantou.guguan.net/img/project/headBg.png");
		background-size: 100% 100%;
		overflow-y: scroll;
		position: fixed;
	}

	page {
		width: 100%;
		height: auto;
		background-color: #4D8A9B;
	}
</style>